import { Text, View, StyleSheet, TextInput, Button } from "react-native";
import { Image } from "expo-image";
import { useState } from "react";
import { router } from "expo-router";
import AsyncStorage from "@react-native-async-storage/async-storage";

export default function AboutScreen() {
  const [loginInfo, setLoginInfo] = useState<{
    email: string;
    password: string;
  }>({
    email: "",
    password: "",
  });
  const handleLogin = async () => {
    await AsyncStorage.setItem("userInfo", JSON.stringify(loginInfo));
    router.push("/(tabs)");
  };

  return (
    <View style={styles.container}>
      <Image source={require("@/assets/title.svg")} style={styles.image} />
      <View style={styles.inputStyle}>
        <TextInput
          style={styles.input}
          placeholder="Email"
          autoFocus
          placeholderTextColor={"#003F38"}
          value={loginInfo.email}
          onChangeText={(text) => setLoginInfo({ ...loginInfo, email: text })}
        />
        <TextInput
          textContentType="password"
          autoComplete="password"
          style={styles.input}
          placeholder="Password"
          placeholderTextColor={"#003F38"}
          value={loginInfo.password}
          onChangeText={(text) =>
            setLoginInfo({ ...loginInfo, password: text })
          }
        />
        <Text style={{ color: "#003F38" }}>Lupa password anda?</Text>
        <Button color={"#008000"} title="Masuk" onPress={handleLogin} />
      </View>
      <Text style={styles.bottom}>1.0.0</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5F7F9",
    alignItems: "center",
    justifyContent: "center",
    gap: 60,
  },
  image: {
    width: "54.29%",
    height: "5%",
  },
  input: {
    borderRadius: 10,
    width: 224,
    height: 40,
    backgroundColor: "#ffffff",
    boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
    paddingLeft: 14,
    paddingTop: 10,
  },
  inputStyle: {
    gap: 20,
  },
  bottom: {
    position: "absolute",
    bottom: 10,
  },
});
